<template>
    <div class="doctorDetails-box">
        <div class="doctorDetails-box-head">
            <span></span>
            医生详情
        </div>
        <div class="doctorDetails-box-content">
            <div class="doctorDetails-box-content-title">
                医生信息
            </div>
            <div class="doctorDetails-box-content-one">
                <div>
                    <span>医生编号</span>
                    <span>{{ doctordetailsList.number }}</span>
                </div>
                <div>
                    <span>医生姓名</span>
                    <span>{{ doctordetailsList.name }}</span>
                </div>
                <div style="display: flex;align-items: center;">
                    <span>医生头像</span>
                    <img :src="'http://127.0.0.1:3000/' + doctordetailsList.picture"
                        style="width: 50px;height: 50px; border-radius: 50%;" alt="">
                </div>
                <div>
                    <span>联系电话</span>
                    <span>{{ doctordetailsList.tel }}</span>
                </div>
            </div>
            <div class="doctorDetails-box-content-two">
                性别
                <span>{{ doctordetailsList.gender }}</span>
            </div>
            <div class="doctorDetails-box-content-three">
                <span>医生简介</span>
                <span>{{ doctordetailsList.description }}</span>
            </div>
            <div class="doctorDetails-box-content-four">
                <span>医生擅长</span>
                <span>{{ doctordetailsList.adept }}</span>
            </div>
            <div class="doctorDetails-box-content-five">
                <span>加入团队</span>
                <div>
                    <div class="doctorDetails-box-content-five-child" v-for="(item, index) in doctordetailsList.team"
                        :key="index">
                        {{ item.oname }}/{{ item.tname }}/{{ doctordetailsList.role }}
                    </div>
                </div>
            </div>
            <div class="doctorDetails-box-content-six">
                <span>签约人数</span>
                <span>{{ doctordetailsList.signCount.signCount }}</span>
            </div>
            <div class="doctorDetails-box-content-seven">
                <span>医生评分</span>
                <span>{{ doctordetailsList.scoreCount.scoreCount }}</span>
            </div>
            <div class="doctorDetails-box-content-eight">
                <span>创建时间</span>
                <span>{{ doctordetailsList.createTime }}</span>
            </div>
            <div class="doctorDetails-box-content-nine">
                <span>创建人</span>
                <span>{{ doctordetailsList.creatorName }}</span>
            </div>
            <div class="doctorDetails-box-content-ten">
                <span>帐号状态</span>
                <el-switch v-model=doctordetailsList.flag :active-value="1" :inactive-value="0" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999" active-text="启用"
                    inactive-text="禁用" />
            </div>
        </div>
        <div class="doctorDetails-box-content-btn">
            <el-button type="primary"><router-link style="color: white;text-decoration: none;"
                    to="/home/message">发送消息</router-link></el-button>
            <el-button type="primary">编辑医生信息</el-button>
            <el-button type="danger">删除</el-button>
            <el-button><router-link style="color: black;text-decoration: none;"
                    to="/home/institution/ys">返回</router-link></el-button>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import api from '@/api'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router';
import doctorDetailsType from '@/types/adong/doctorDetails'

const route = useRoute()
const doctordetailsList = ref<doctorDetailsType>({
    adept: '',
    number: '',
    creatorName: '',
    name: '',
    picture: '',
    tel: '',
    gender: '',
    description: '',
    team: [],
    role: '',
    signCount: { signCount: '' },
    scoreCount: { scoreCount: '' },
    createTime: '',
    flag: ''
})
onMounted(async () => {
    console.log('66666666', route.params.id);
    await getDoctorDetailsData(route.params.id);
})
const getDoctorDetailsData = async (id: any) => {
    const result = await api.ysAdmin.getDoctorDetailsApi({ id: id })
    console.log('医生详情信息', result.data.data);
    doctordetailsList.value = result.data.data

}
</script>

<style lang='scss' scoped>
.doctorDetails-box {
    background-color: white;
    box-sizing: border-box;
    padding: 20px;

    .doctorDetails-box-head {
        line-height: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba($color: black, $alpha: .1);
        margin-bottom: 20px;

        span {
            display: inline-block;
            width: 6px;
            height: 20px;
            background-color: #2984f8;
            border-radius: 3px;
            margin-bottom: -3px;
            margin-right: 8px;
        }

        font-size: 18px;
        font-weight: 500;
        color:rgba(51, 51, 51, 0.898039215686275);
    }

    .doctorDetails-box-content {
        margin-bottom: 30px;
        border-bottom: 1px solid rgba($color: black, $alpha: .1);

        .doctorDetails-box-content-title {
            font-size: 16px;
            color: rgba(51, 51, 51, 0.898039215686275);
            margin-bottom: 20px;
        }

        .doctorDetails-box-content-one {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            align-items: center;

            div {

                :first-child {
                    color: #999;
                    margin-right: 20px;
                }
            }
        }

        .doctorDetails-box-content-two {
            font-size: 13px;
            color: #999;
            margin-top: 10px;

            span {
                color: black;
                margin-left: 40px;
            }
        }

        .doctorDetails-box-content-three,
        .doctorDetails-box-content-four {
            font-size: 13px;
            margin-top: 20px;
            display: flex;

            :first-child {
                width: 119px;
                color: #999;
                margin-right: 20px;
            }
        }

        .doctorDetails-box-content-four {
            :last-child {
                margin-left: -68px;
            }
        }

        .doctorDetails-box-content-five {
            display: flex;
            font-size: 13px;
            margin-top: 30px;

            span {
                color: #999;
                margin-right: 20px;
            }

            .doctorDetails-box-content-five-child {
                margin-bottom: 20px;
            }
        }

        .doctorDetails-box-content-six,
        .doctorDetails-box-content-seven,
        .doctorDetails-box-content-eight,
        .doctorDetails-box-content-nine {
            font-size: 13px;
            color: #999;
            margin-bottom: 25px;

            :last-child {
                color: black;
                margin-left: 20px;
            }
        }

        .doctorDetails-box-content-ten {
            margin-bottom: 20px;

            span {
                font-size: 13px;
                color: #999;
                margin-right: 20px;
            }
        }
    }

    .doctorDetails-box-content-btn {
        .el-button {
            height: 40px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        }
    }

}
</style>